<template>
  <div>
    <img class="bookimg" v-lazy="CPNimgurl" />
    <div class="bookname">
      <slot name="name"></slot>
    </div>
    <star :grade="CPNgrade" :showGrade="true"></star>
  </div>
</template>

<script>
import Star from '@/components/Star.vue'
export default {
  components: {
    Star
  },
  data() {
    return {
      CPNgrade: (8.4 + Math.random()).toFixed(1)
    }
  },
  props: {
    CPNimgurl: String,
  }
}
</script>

<style>
.bookimg {
  width: 100%;
  height: 140px;
  border-radius: 4px;
  background-color: #f5f5f5;
  background-size: 100% 100%;
}

.bookname {
  font-weight: 700;
  font-size: 13px;
  margin-top: 4px;
  line-height: 23px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>